<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>表单</title>
    <style type="text/css">
        .layui-form{
            width:800px;border:1px solid #ccc;margin:100px auto; height:600px;          
        }
        .layui-form-item{
            width:700px;margin-top:30px;
        }
        .layui-input-block{
            border: 1px solid #ccc;
        }

    </style>
	<!-- 引文件 -->
	<link rel="stylesheet" href="./layui/css/layui.css">
	<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
  
    <form action="" class="layui-form" >
        <!-- 用户名 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>        
            <div class="layui-input-block"> 
                <input type="text" placeholder="请输入用户信息"  class="layui-input" name='title' required  lay-verify="required" autocomplete="off" >
            </div> 
        </div>    

        <!-- 密码 -->
        <div class="layui-form-item">
            <label class="layui-form-label" >密码框</label>       
            <div  class="layui-input-inline"> 
                <input type="password" placeholder="请输入密码"  class="layui-input" name='password' required lay-verify="required">
            </div>             
        </div> 

        <!-- 选择框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>

        <!-- 复选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>

        <!-- 单选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>

        
    </form>

    <script type="text/javascript">
        layui.use('form',function(){
            var form = layui.form();
        });
    </script>
    
</body>
</html>